<template>
  <div>
    <div class="algorithm-hea">
      <div class="algo-mb">
        <label>当前预警模型 :</label>
        <div class="algo-mb-right">
          <span>企业非法集资风险</span>
        </div>
      </div>
      <div class="algo-mb">
        <label>当前模型风险类别 :</label>
        <div class="algo-mb-right">
          <ul>
            <li v-for="(item,index) in modelList" :key="index">
              <span>{{item.name}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="algo-mb">
        <label>烽火指数预警分值 :</label>
        <div class="algo-mb-right">
          <p class="numStyle">
            <el-input-number v-model="num8" controls-position="right" :min="0" :max="100"></el-input-number>
          </p>
          <!--<input type="number" value="60" max="100" min="0" maxlength="3" @input="keyDown()">-->
          <span class="prompt">注意：请填入0-100数值</span>
        </div>
      </div>
    </div>
    <div class="algorithm-box">
      <div class="algo-block">
        <div class="algo-hea">
          <span>合规风险设置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in complianceRisk" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :key="index">
                <span>{{list.perName}} :</span>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <div class="algo-block">
        <div class="algo-hea">
          <span>经营风险配置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in businessRisk" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :key="index">
                <span>{{list.perName}} :</span>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <div class="algo-block">
        <div class="algo-hea">
          <span>舆情风险配置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in riskPublicOpinion" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :key="index">
                <span>{{list.perName}} :</span>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <div class="algo-block">
        <div class="algo-hea">
          <span>关联风险配置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in associatedRisk" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :key="index">
                <span>{{list.perName}} :</span>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <div class="algo-block">
        <div class="algo-hea">
          <span>收益率风险配置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in rateReturnRisk" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :key="index">
                <span>{{list.perName}} :</span>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <div class="algo-block">
        <div class="algo-hea">
          <span>传播风险配置</span>
        </div>
        <div class="algon-con">
          <div v-for="(item,index) in riskOfCommunication" :key="index">
            <p class="algoTitle">
              <strong>{{item.name}}</strong>
              <span v-if="index<2">注意:请输入0-100数值</span>
            </p>
            <ul class="percent">
              <li v-for="(list,index) in item.percentList" :class="{'numShow': list.numShow==1}" :key="index">
                <p v-if="list.perName">
                  <span>{{list.perName}} :</span>
                </p>
                <label v-if="list.numShow == 1" class="num">{{list.numSection}}</label>
                <p class="numStyle">
                  <el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %
                </p>
                <!--<input type="number" :value="list.num" :disabled="list.disabled" max="100" min="0"/>%-->
              </li>
            </ul>
            <j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">
            </j-select>
          </div>
        </div>
      </div>
      <!--<div class="algo-block">-->
        <!--<div class="algo-hea">-->
          <!--<span>投诉举报风险配置</span>-->
        <!--</div>-->
        <!--<div class="algon-con">-->
          <!--<div v-for="(item,index) in complaintReportingRisk">-->
            <!--<p class="algoTitle">-->
              <!--<strong>{{item.name}}</strong>-->
              <!--<span v-if="index<2">注意:请输入0-100数值</span>-->
            <!--</p>-->
            <!--<ul class="percent">-->
              <!--<li v-for="list in item.percentList">-->
                <!--<span>{{list.perName}} :</span>-->
                <!--<p class="numStyle">-->
                  <!--<el-input-number :disabled="list.disabled" v-model="list.num" controls-position="right" :min="0" :max="100"></el-input-number> %-->
                <!--</p>-->
                <!--&lt;!&ndash;<input type="number" :value="list.num" :disabled="list.disabled"  max="100" min="0"/>%&ndash;&gt;-->
              <!--</li>-->
            <!--</ul>-->
            <!--<j-select v-if="index==2" class="select" v-model="prewarningTime" :initItems="item.prewarningTimes" :selectedIndex="prewarningTimeIdx">-->
            <!--</j-select>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="algorithm-fot">
        <button @click="earlyPreservation">确定</button>
        <button @click="cancel">取消</button>
      </div>
      <!-- 弹出层内容 -->
      <j-dialog class="feature_dialog" ref="exportDialog" :initTitle="initTitle">
        <div class="con">
          <span>{{information}}</span>
        </div>
        <div class="btn">
          <button class="save-btn" target="_blank" @click="deletePre()">确 定</button>
        </div>
      </j-dialog>
    </div>
  </div>
</template>
<script>
  import { jSelect, jDialog } from '../../components'
  import {earlyAlgorithmData} from '../../assets/js/earlyAlgorithmData.js'
  export default {
    data() {
      return {
        prewarningTime: '',
        prewarningTimeIdx: 0,
        modelList: [
          {name: '合规风险'},
          {name: '经营风险'},
          {name: '舆情风险'},
          {name: '关联企业风险'},
          {name: '收益率风险'},
          {name: '传播风险'},
          {name: '投诉举报风险'}
        ],
        complianceRisk: earlyAlgorithmData.complianceRisk,
        businessRisk: earlyAlgorithmData.businessRisk,
        riskPublicOpinion: earlyAlgorithmData.riskPublicOpinion,
        associatedRisk: earlyAlgorithmData.associatedRisk,
        rateReturnRisk: earlyAlgorithmData.rateReturnRisk,
        riskOfCommunication: earlyAlgorithmData.riskOfCommunication,
        initTitle: '系统提示',
        num8: 60,
        information: ''
      }
    },
    methods: {
      earlyPreservation() {
        this.$refs.exportDialog.show = true
        this.information = '保存成功'
      },
      cancel() {
        this.$refs.exportDialog.show = true
        this.information = '取消成功'
      },
      deletePre() {
        this.$refs.exportDialog.show = false
      }
    },
    mounted() {
    },
    components: {
      jSelect,
      jDialog
    }
  }
</script>
<style lang="scss" scoped>
  .algorithm-hea{
    width: 100%;
    height: 180px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 30px 0 0 40px;
    .algo-mb{
      width: 100%;
      margin-bottom: 18px;
      &>label{
        display: inline-block;
        width: 125px;
        height: 38px;
        line-height: 38px;
        color: #999999;
      }
      .algo-mb-right{
        display: inline-block;
        margin-left: 5px;
        ul{
          width: 100%;
          display: flex;
          li{
            padding: 0 12px;
            height: 22px;
            line-height: 22px;
            background-color: #e2f1ff;
            border-radius: 3px;
            margin-right: 30px;
            span{
              color: #75bfff;
            }
          }
        }
        input{
          width: 96px;
          height: 26px;
          padding-left: 10px;
          box-sizing: border-box;
          background-color: #ffffff;
          border-radius: 5px;
          border: solid 1px #d9d9d9;
          outline:none
        }
       .prompt{
          color: #999999;
          margin-left: 10px;
        }
      }
    }
  }
  .algorithm-box{
    width: 100%;
    margin-top:20px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    padding: 30px 18px;
    box-sizing: border-box;
    .algo-block{
      width: 100%;
      margin-bottom: 50px;
      /*padding: 20px 15px;*/
      .algo-hea{
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 8px;
        span{
          padding-left: 8px;
          font-size: 16px;
          border-left: 5px solid #1891ef;
        }
      }
      .algon-con{
        padding-left: 20px;
        box-sizing: border-box;
        width: 100%;
        span{
          color: #999999;
        }
        .algoTitle{
          width: 100%;
          margin-top: 30px;
          margin-bottom: 20px;
          strong{
            font-weight: bold;
          }
          span{
            margin-left: 20px;
          }
        }
        .select{
          width: 175px;
          margin-left: 45px;
        }
        .percent{
          width: 100%;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          .numShow{
           text-align: center;
            input{
              margin: 0 5px 0 0;
            }
          }
          li:last-child{
            margin-bottom:0;
          };
          li{
            width: 33.3%;
            margin-bottom: 28px;
            .num{
              margin-left: 15px;
              color: #999999;
            }
            p{
              display: inline-block;
              /*background-color: red;*/
            }
            span{
              display: inline-block;
              width: 160px;
              text-align: right;
            }
            input{
              width: 96px;
              height: 26px;
              border-radius: 5px;
              border: solid 1px #d9d9d9;
              margin: 0 5px 0 15px;
              padding-left: 15px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
  }
  .algorithm-fot{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    button{
      width: 111px;
      height: 34px;
      border-radius: 5px;
      cursor: pointer;
    }
    button:hover{
      opacity: 0.9;
    }
    button:nth-child(1){
      background-image: linear-gradient(-23deg, #2f81ee 0%,#3f8ffa 100%);
      color: white;
      margin-right: 25px;
    }
    button:nth-child(2){
      border: solid 1px #9dc5fd;
      background-image: linear-gradient(-23deg, rgba(229, 240, 255, 0.6) 0%,rgba(240, 246, 255, 0.6) 100%);
      color: #3082ee;
    }
  }
  .numStyle{
    display: inline-block;
    &>div{
      width: 95px;
    }
  }

  // 弹出层
  .feature_dialog {
    width: 445px;
    .baobiao {
      clear: both;
      display: block;
      margin-bottom: 28px;
      color: #ff4242;
      text-align: center;
    }
    .con{
      width: 100%;
      height: 70px;
      text-align: center;
      margin-top: 30px;
    }
    .btn {
      text-align: center;
      width: 100%;
      button{
        color: #fff;
        width: 111px;
        height: 34px;
        line-height: 34px;
        display: inline-block;
        background: #3f8ffa;
        border: 1px solid #9dc5fd;
        border-radius: 5px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
</style>



// WEBPACK FOOTER //
// src/view/sysManage/earlyWarningAlgorithm.vue